<template>
  <div class="comp-time">
    <div>--{{ year }}--</div>
    <Row index="" type="flex" justify="space-between" align="middle">
      <Col span="5">
        <Row type="flex" justify="start" align="middle">
          <Col span="3" align="center">
            <Icon
              type="ios-arrow-dropleft-circle"
              size="24"
              @click="firstWeek"
            />
          </Col>
          <Col span="18" align="center">
            <Button style="height: 45px;">
              <div>{{ date.week }}周</div>
              <div>
                {{ date.startMonth + 1 }}月{{ date.startDay }}日—{{
                  date.endMonth + 1
                }}月{{ date.endDay }}日
              </div>
            </Button>
          </Col>
          <Col span="3" align="center">
            <Icon
              type="ios-arrow-dropright-circle"
              size="24"
              @click="lastWeek"
            />
          </Col>
        </Row>
      </Col>

      <Col span="16" style="margin-left: 30px">
        <Select v-model="model1" style="width:200px">
          <Option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>

      <Col span="2" align="right">
        <div @click="close">
          关闭
          <Icon type="md-close-circle" size="30" />
        </div>
      </Col>
    </Row>
    <br />

    <Row index="" type="flex" justify="space-between" align="middle">
      <Col
        span="2"
        v-for="(item, index) in weeks"
        :key="index"
        align="center"
        style="width:110px"
      >
        <Button style="height: 60px;width:130px;padding:0">
          <div>周{{ capitalWeeks[item.week] }}</div>
          <div>{{ item.month + 1 }}月{{ item.day }}日</div>
        </Button>
      </Col>
    </Row>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { mapState } from 'vuex'

export default {
  props: ['cityList'],
  data () {
    return {
      year: '',
      capitalWeeks: ['日', '一', '二', '三', '四', '五', '六'],

      date: {
        // {
        //   week: 2,
        //   startYear: 0,
        //   startMonth: 6,
        //   startDay: 15,
        //   endYear: 0,
        //   endMonth: 6,
        //   endDay: 21
        // }
      },

      weeks: [],

      current: {
        week: 0,
        startYear: 0,
        endYear: 0,
        weekFirstDay: '',
        weekLastDay: ''
      },

      model1: ''
    }
  },
  computed: mapState({
    currentWeek: store => store.course.currentWeek
  }),
  mounted () {
    this.getDates(this.currentWeek.startTime)
  },
  methods: {
    close () {
      this.$store.commit('changeIsShowClass', false)
    },

    getYear () {
      if (this.date.startYear !== this.date.endYear) {
        this.year = `${this.date.startYear}学年～${this.date.endYear}学年`
      } else {
        this.year = `${this.date.startYear}学年`
      }
    },

    firstWeek () {
      this.weeks = []
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).subtract(7, 'day')
      this.getDates(weekInfo)
      this.getYear()
    },

    lastWeek () {
      this.weeks = []
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).add(7, 'day')
      this.getDates(weekInfo)
      this.getYear()
    },

    getDates (date) {
      this.getCurrentWeek(date) // 获取当前周
      this.getYear()
    },

    getWeek (date) {
      const weekFirstDay = dayjs(date).startOf('week') // 6.13  7.13
      const weekLastDay = dayjs(date).endOf('week')
      const week = dayjs(weekFirstDay).week() // 29
      const startYear = dayjs(weekFirstDay).year()
      const endYear = dayjs(weekLastDay).year()

      return { startYear, endYear, week, weekFirstDay, weekLastDay }
    },

    getDateObj (dateObj) {
      return {
        startYear: dayjs(dateObj.weekFirstDay).year(),
        endYear: dayjs(dateObj.weekLastDay).year(),
        week: dateObj.week,
        startMonth: dateObj.weekFirstDay.$M,
        startDay: dateObj.weekFirstDay.$D,
        endMonth: dateObj.weekLastDay.$M,
        endDay: dateObj.weekLastDay.$D
      }
    },

    getCurrentWeek (date) {
      this.current = this.getWeek(date)
      this.date = this.getDateObj(this.current)
      this.calcDays()
    },

    getWeekObj (weekDate) {
      return {
        week: weekDate.$W,
        month: weekDate.$M,
        day: weekDate.$D
      }
    },

    calcDays () {
      let i = 1
      let weekFirstDay = this.current.weekFirstDay || ''
      this.weeks.push(this.getWeekObj(weekFirstDay))
      while (i < 7) {
        i++
        weekFirstDay = dayjs(weekFirstDay).add(1, 'day')
        this.weeks.push(this.getWeekObj(weekFirstDay))
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comp-time {
  //   margin-left: -10px;
}
</style>
